<template>
  <div>
    <template v-for="item in children">
      <div class="wrapper" v-if="level < 2" :key="item.id">
        <!-- 左边 -->
        <div class="left">
          <el-tag closable @close="$emit('close', item)">
            {{ item.authName }}
          </el-tag>
        </div>
        <!-- 右边  -->
        <div class="right">
          <Tags
            v-on="$listeners"
            v-if="item.children"
            :children="item.children"
            :level="level + 1"
          />
        </div>
      </div>
      <el-tag
        v-else
        type="success"
        closable
        :key="item.id"
        @close="$emit('close', item)"
      >
        {{ item.authName }}
      </el-tag>
    </template>
  </div>
</template>

<script>
export default {
  name: "Tags",
  props: {
    /**
     * 渲染的数据
     */
    children: Array,
    /**
     * 层级
     */
    level: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  border: 1px solid #eeee;
  display: flex;
  align-items: center;
  .left {
    padding: 20px;
  }
  .right {
    flex: 1;
    .el-tag {
      margin-left: 8px;
    }
  }
}
</style>